<template>
  <div class="search-results-container">
    <!-- 搜索结果标题 -->
    <div class="search-header">
      <h2 class="search-title">搜索结果</h2>
      <p class="search-count">共 {{ games.length }} 结果</p>
    </div>

    <!-- 游戏结果网格 -->
    <div class="games-grid">
      <el-card v-for="(game, index) in games" :key="index" class="game-card" shadow="never"
        @click.stop="navigateToGameDetail(index)">
        <GameCard :game="game" @play="handleGamePlay" />

        <!-- <div class="game-card-content">
          <div class="game-image-wrapper">
            <img :src="game.coverUrl" :alt="game.title" class="game-image">
            <div v-if="game.needsLogin" class="game-account-badge">
              需账号
            </div>
          </div>
          <div class="game-info">
            <h3 class="game-title">{{ game.title }}</h3>
            <p class="game-description">{{ game.description }}</p>
            <div class="game-actions">
              <el-button type="primary" class="play-btn" icon="el-icon-zap" :loading="game.loading"
                @click="playGame(index, $event)">
                秒玩
              </el-button>
              <span v-if="game.needsLogin" class="login-tip">需要账号</span>
            </div>
          </div>
        </div> -->
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { gameApi } from '@/api/game.js'
import { useLoginCheck } from '@/utils/auth.js'
import GameCard from '@/components/GameCard.vue'

// 路由实例
const route = useRoute()
const router = useRouter()

// 游戏数据
const games = ref([])

// 引入登录检查模块
const { checkAndPerform } = useLoginCheck()

// 组件挂载时执行
onMounted(() => {
  // 获取路由参数中的搜索关键词
  const keyword = route.query.keyword || ''
  if (keyword) {
    searchGames(keyword)
  }
})

// 搜索游戏
const searchGames = (keyword) => {
  let params = {
    "page": 1,
    "rows": 5,
    "keyword": keyword
  }
  gameApi.getSearchGames(params).then(res => {
    games.value = res.games
  }).catch((err) => {
    console.error('搜索游戏失败:', err)
  })
}

// 跳转到游戏详情页
const navigateToGameDetail = (index) => {
  router.push({
    path: `/cloudGaming/detail/${games.value[index].id}`,
  })
}

// 秒玩游戏处理函数
const playGame = (index, event) => {
  // 阻止事件冒泡，避免触发卡片点击事件
  event.stopPropagation()

  // 检查登录并执行操作
  checkAndPerform(() => {
    // 显示加载状态
    games.value[index].loading = true

    // 模拟游戏启动过程
    setTimeout(() => {
      games.value[index].loading = false
      // 这里可以添加实际的游戏启动逻辑
      console.log('启动游戏:', games.value[index].title)
    }, 1000)
  })
}

// 处理游戏播放事件
const handleGamePlay = (game) => {
  // 这里可以添加额外的游戏播放处理逻辑
  console.log('游戏播放事件:', game.title)
}
</script>

<style lang="scss" scoped>
.search-results-container {
  width: 100%;

  .search-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .search-title {
      font-size: 24px;
      font-weight: 600;
      color: #ffffff;
      margin: 0;
    }

    .search-count {
      font-size: 14px;
      color: #949495;
      margin: 0;
    }
  }

  .games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .game-card {
    background-color: #1a1c1e;
    border-radius: 4px;
    overflow: hidden;
    border: none;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .game-card-content {
      position: relative;
      width: 100%;

      .game-image-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;

        .game-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;

          &:hover {
            transform: scale(1.05);
          }
        }

        .game-account-badge {
          position: absolute;
          top: 8px;
          left: 8px;
          background-color: rgba(255, 102, 0, 0.9);
          color: #ffffff;
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 4px;
          font-weight: 500;
        }
      }

      .game-info {
        padding: 16px 0;

        .game-title {
          font-size: 16px;
          font-weight: 600;
          color: #ffffff;
          margin: 0 0 8px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .game-description {
          font-size: 14px;
          color: #949495;
          margin: 0 0 12px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .game-actions {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .play-btn {
            background-color: #3c9cff;
            border-color: #3c9cff;
            color: #ffffff;
            font-size: 14px;
            font-weight: 500;

            &:hover {
              background-color: #5aa6ff;
              border-color: #5aa6ff;
              color: #ffffff;
            }
          }

          .login-tip {
            font-size: 12px;
            color: #ff6600;
          }
        }
      }
    }
  }
}
</style>